<template>
	<div class="todo-footer">
		<label>
			<input type="checkbox" v-model="isAllChecked" />
		</label>
		<span>
			<span>已完成{{ complateNum }}</span> / 全部{{ todoList.length }}
		</span>
		<button class="btn btn-danger" @click="clearComplate">
			清除已完成任务
		</button>
	</div>
</template>

<script>
export default {
	name: "Footer",
	props: ["todoList", "allChecked", "clearComplate"],
	// 计算一共有几个复选框被选中
	computed: {
		// 在计算源数据中的true具体有几个
		complateNum() {
			// a是初始值,也是每次调用函数后的返回值
			// b是当前正在处理的数组内的对象元素
			// a初始值设置为0,当每次循环对象元素内的done为true时则返回值默认+1,如果为false则返回原来的值
			return this.todoList.reduce((a, b) => (b.done ? a + 1 : a), 0);
		},
		isAllChecked: {
			// 查看自己源数组对象内部的done是否都为true,全部是并且数组长度不为0则返回true,有一个条件不满足则是false
			get() {
				return (
					this.todoList.every((item) => item.done) && this.todoList.length != 0
				);
			},
			set(newChecked) {
				// 复选框在点击的时候相当于在不停的改变isAllChecked的值,相当于在传值
				// console.log(newChecked)
				this.allChecked(newChecked);
			},
		},
	},
};
</script>

<style scoped>
.todo-footer {
	height: 40px;
	line-height: 40px;
	padding-left: 6px;
	margin-top: 5px;
}

.todo-footer label {
	display: inline-block;
	margin-right: 20px;
	cursor: pointer;
}

.todo-footer label input {
	position: relative;
	top: -1px;
	vertical-align: middle;
	margin-right: 5px;
}

.todo-footer button {
	float: right;
	margin-top: 5px;
}
</style>
